<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center JNPF-flex-main">
      <div class="student-status">
        <el-row :gutter="10">
          <el-col :span=6>
            <SchoolForm :data="schoolData" @school-session="clickSchoolGetSession"/>
          </el-col>
          <el-col :span=6>
            <SessionForm :data="sessionData" :title="schoolName"
                         @session-clazz="clickSessionGetClazz"/>
          </el-col>
          <el-col :span=6>
            <ClazzForm :data="clazzData" :title="sessionName"
                       @clazz-student="clickClazzGetStudent"/>
          </el-col>
          <el-col :span=6>
            <StudentForm :data="studentData" :title="clazzName"/>
          </el-col>
        </el-row>
        <!--        <EchartsForm :list="echartsData"/>-->
      </div>
    </div>
  </div>
</template>

<script>
// 学校信息组件
import SchoolForm from './components/school-form'
// 年级信息组件
import SessionForm from './components/session-form'
// 班级信息组件
import ClazzForm from './components/clazz-form'

// 学生信息组件
import StudentForm from './components/student-form'


//图标e-charts
import EchartsForm from './components/echarts-form'

//获取学校信息接口
import {ListSchool} from '@/api/bt/school'
//获取学校届别信息接口
import {ListBySchoolId} from '@/api/bt/session'
//获取届别班级信息接口
import {ListBySessionId} from "@/api/bt/clazz";
//获取学生信息接口
import {ListByClazzId} from "@/api/bt/student"


export default {
  name: "student-status",
  components: {
    SchoolForm,
    SessionForm,
    ClazzForm,
    StudentForm,
    EchartsForm
  },
  data() {
    return {
      title: '学籍管理',
      // * 学校数据
      schoolData: [],

      // * 届别表格
      sessionData: [],
      // * 学校名称
      schoolName: undefined,


      // * 班级表格‘
      clazzData: [],
      // * 届别名称
      sessionName: undefined,


      // * 学生表格‘
      studentData: [],
      // * 班级名称
      clazzName: undefined,


      // * 获取学生数量数组
      eclist: [],
      echartsData: [],
      //学校名字
      eName: [],
      //现在
      enowNum: [],
      //所有
      eallNum: [],
    }
  },
  created() {
    this.SchoolList()
  },
  methods: {
    //清空班级列表
    ClearClazz() {
      this.clazzData = []
      this.sessionName = undefined

    },
    //清空学生列表
    ClearStudent() {
      this.studentData = []
      this.clazzName = undefined

    },

    //获取学校列表
    SchoolList() {
      ListSchool().then((response) => {
        this.schoolData = response.data
      })
    },
    //获取点击学校名称 获取届别
    clickSchoolGetSession(row, actived = 1) {
      this.schoolName = row.name
      this.sessionDisabled = true
      ListBySchoolId(row.id, actived).then((response) => {
        this.sessionData = response.data
        this.ClearClazz()
        this.ClearStudent()
      })
    },
    //点击届别获取班级
    clickSessionGetClazz(row, actived = 1) {
      this.sessionName = row.gradeShow
      ListBySessionId(row.id, actived).then((response) => {
        this.clazzData = response.data
        this.ClearStudent()
      })
    },
    //点击班级获取学生
    clickClazzGetStudent(row, actived = 1) {
      this.clazzName = row.clazzShow
      ListByClazzId(row.id, actived).then((response) => {
        this.studentData = response.data
      })
    },
  }
}
</script>

<style scoped>

</style>
